<!-- 魔方属性 -->
<template>
  <div class="draggable-rubik-s-cube-props">
    <component
      :is="templateId"
      @change="handleChange"
      :list="cubes"
      :imageGutter="imageGutter"
      :len="len"
    />
    <div class="error" v-show="isShowError">请添加图片</div>
    <a-form :form="form">
      <a-row :gutter="12" class="imgbackground">
        <a-col :span="8">
          <oss-multiple-image
            :fileList="fileList"
            @filesChange="handleUploadChange"
            :max-length="1"
          />
        </a-col>
        <a-col :span="16"></a-col>
      </a-row>
      <a-row :gutter="12">
        <radio-selection label="选择模板" :selected.sync="iTemplateId" :options="CubeTemplates" />
        <!--<a-form-item :colon="false">
          <template v-slot:label>
            <div class="choose">
              选择模板
              <span>{{ templateName }}</span>
            </div>
          </template>
          <a-radio-group
            :options="CubeTemplates"
            v-decorator="['templateId']"
          />
        </a-form-item>-->
      </a-row>
      <a-row :gutter="12">
        <a-form-item
          label="图片间隙"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-col :span="10">
            <a-slider :min="0" :max="30" v-decorator="['imageGutter']" />
          </a-col>
          <a-col :span="8">
            <a-input-number :min="0" :max="30" style=" width: 100%; marginLeft: 16px" v-model="imageGutterBak"/>
          </a-col>
        </a-form-item>
      </a-row>
      <a-row :gutter="12">
        <a-form-item
          label="页面间距"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-col :span="10">
            <a-slider :min="0" :max="30" v-decorator="['pageGutter']" />
          </a-col>
          <a-col :span="8">
            <a-input-number :min="0" :max="30" style=" width: 100%; marginLeft: 16px" v-model="pageGutterBak" />
          </a-col>
        </a-form-item>
      </a-row>
    </a-form>
  </div>
</template>

<script>
  import OssMultipleImage from '@/components/OSS/OssMultipleImage'
  import cloneDeep from 'lodash.clonedeep'
  import { CubeTemplates } from '@/components/Draggable/Constants'
  import { RadioSelection } from './other'
  import { Slider } from 'ant-design-vue'
  export default {
    name: 'DraggableRubikSCubeProps',
    components: {
      RadioSelection,
      OssMultipleImage,
      'ASlider': Slider,
      'RowTwoCols': () => import('@/components/Draggable/template/RowTwoCols'),
      'RowThreeCols': () => import('@/components/Draggable/template/RowThreeCols'),
      'RowFourCols': () => import('@/components/Draggable/template/RowFourCols'),
      'LeftTwoRight': () => import('@/components/Draggable/template/LeftTwoRight'),
      'LeftThreeRight': () => import('@/components/Draggable/template/LeftThreeRight'),
      'TwoLeftTwoRight': () => import('@/components/Draggable/template/TwoLeftTwoRight'),
      'UpTwoDown': () => import('@/components/Draggable/template/UpTwoDown')
    },
    props: {
      templateId: {
        type: String,
        default: 'RowTwoCols'
      },
      imageGutter: {
        type: Number,
        default: 0
      },
      pageGutter: {
        type: Number,
        default: 0
      },
      list: {
        type: Array,
        default: () => []
      }
    },
    computed: {
      isShowError () {
        const { cubes, selected, hasError } = this
        return hasError || cubes.length === 0 || (cubes[selected] && !cubes[selected].imgUrl)
      },
      templateName () {
        const { templateId, CubeTemplates } = this
        const template = CubeTemplates.find(item => item.value === templateId)
        return template ? template.label : ''
      },
      len () {
        const { templateId, CubeTemplates } = this
        const template = CubeTemplates.find(item => item.value === templateId)
        return template ? template.len : 0
      },
      iTemplateId: {
        get () {
          return this.templateId
        },
        set (val) {
          this.$emit('update:templateId', val)
        }
      }
    },
    data () {
      const { fieldsChange, imageGutter, pageGutter } = this
      return {
        CubeTemplates,
        selected: 0,
        cubes: cloneDeep(this.list),
        form: this.$form.createForm(this, { name: 'draggable-rubik-s-cube-props', onFieldsChange: fieldsChange }),
        fileList: [],
        hasError: true,
        imageGutterBak: imageGutter,
        pageGutterBak: pageGutter
      }
    },
    methods: {
      fieldsChange (props, fields) {
        for (const key in fields) {
          if (key === 'imageGutter' || key === 'pageGutter') {
            this[`${key}Bak`] = fields[key].value
          }
          if (!fields[key].validating) {
            this.$emit(`update:${key}`, fields[key].value)
          }
          this.$emit('error', fields[key].errors)
        }
      },
      handleChange (res) {
        for (const k in res) {
          this[k] = res[k]
        }
      },
      handleUploadChange (files) {
        const { validate, selected, cubes } = this
        this.fileList = files
        if (files.length === 0) {
          cubes[selected].imgUrl = ''
        } else {
          cubes[selected].imgUrl = files[0].url
        }
        validate()
      },
      validate () {
        const { cubes } = this
        this.hasError = cubes.filter(item => !item.imgUrl).length > 0
      },
      init () {
        const { validate, templateId, imageGutter, pageGutter, fileList, cubes, selected, form: { setFieldsValue } } = this
        setFieldsValue({
          templateId,
          imageGutter,
          pageGutter
        })
        if (cubes[selected]) {
          fileList.splice(0, fileList.length, {
            uid: 0,
            name: '0',
            url: cubes[selected].imgUrl
          })
        }
        this.$nextTick(() => {
          validate()
        })
      }
    },
    mounted () {
      this.init()
    },
    watch: {
      imageGutterBak (val) {
        this.form.setFieldsValue({
          imageGutter: val
        })
      },
      pageGutterBak (val) {
        this.form.setFieldsValue({
          pageGutter: val
        })
      },
      cubes: {
        deep: true,
        handler (val) {
          this.$emit('update:list', val)
        }
      },
      selected (val) {
        const { cubes, fileList } = this
        fileList.splice(0, fileList.length)
        if (cubes[val] && cubes[val].imgUrl) {
          fileList.push({
            uid: 0,
            name: '0',
            url: cubes[val].imgUrl
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .draggable-rubik-s-cube-props {
    width: 100%;
    padding: 5px 8px;
    .error {

      color: #d40000;
    }
  }
  .choose{
    padding: 0 8px;
  }

  .imgbackground{
    background: #cccccc;
    padding-top: 13px;

  }
</style>
